<template>
  <div className="container" :style="{ height: height }">
    <div className="title_container">
      <span className="title"></span>
      <span style="margin-left: 10px; font-size: 20px; color: #1cdbfe">
        家床改造进度</span
      >
    </div>
    <home-apply
      v-if="screenData.homeBedRemodelProgressList"
      :homeBedRemodelProgressList="screenData.homeBedRemodelProgressList"
    ></home-apply>
    <assess
      v-if="screenData.abilityEvalProgressList"
      :abilityEvalProgressList="screenData.abilityEvalProgressList"
    ></assess>
    <planServer
      v-if="screenData.servicePlanProgressList"
      :servicePlanProgressList="screenData.servicePlanProgressList"
    ></planServer>
    <sign
      v-if="screenData.contractSignProgressList"
      :contractSignProgressList="screenData.contractSignProgressList"
    ></sign>
    <remodelling
      v-if="screenData.elderlyRemodelProgressList"
      :elderlyRemodelProgressList="screenData.elderlyRemodelProgressList"
    ></remodelling>
    <acceptance
      v-if="screenData.elderlyRemodelCheckedProgressList"
      :elderlyRemodelCheckedProgressList="
        screenData.elderlyRemodelCheckedProgressList
      "
    ></acceptance>
  </div>
</template>
<script>
import homeApply from "@/views/dataScreen/dataScreenContent/components/homeapply.vue";
import assess from "@/views/dataScreen/dataScreenContent/components/assess.vue";
import planServer from "@/views/dataScreen/dataScreenContent/components/planServer.vue";
import sign from "@/views/dataScreen/dataScreenContent/components/sign.vue";
import remodelling from "@/views/dataScreen/dataScreenContent/components/remodelling.vue";
import acceptance from "@/views/dataScreen/dataScreenContent/components/acceptance.vue";
import { getHomebedRemodelProgress } from "@/api/dataScreen/index";
export default {
  components: {
    homeApply: homeApply,
    assess: assess,
    planServer: planServer,
    sign: sign,
    remodelling,
    acceptance,
  },
  data() {
    return {
      height: '410px',
      screenData: {},
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      getHomebedRemodelProgress().then((res) => {
        this.screenData = res.homeBedRemodelProgress
      });
    },
  },
  props: {
    isFullscreen: {
      type: Boolean,
      default: false,
    },
  },
  // watch: {
  //   isFullscreen: {
  //     handler(newValue, oldValue) {
  //       if (newValue == true) {
  //         this.height = '430px';
  //       } else {
  //         this.height = '410px';
  //       }
  //     },
  //   },
  // },
};
</script>
<style scoped lang="scss">
.container {
  //height: 410px;
  padding: 10px 20px;
  //background: #06073B;
  border-radius: 7px;
  box-shadow: rgb(8, 79, 160) 0px 0px 40px inset;
  border: 2px solid rgb(8, 79, 160);
  background-color: transparent;

  .title_container {
    display: flex;
    align-items: center;

    .title {
      width: 13px;
      height: 27px;
      background: #1cdbfe;
      border-radius: 6px;
      display: inline-block;
    }
  }
}
</style>
